<template>
  <div class="customerPickingDetailed">
    <div class="customer-title">
      {{cloudShopName}}
    </div>
    <!-- 选择时间部分 -->
    <view class="hbb-dateSelect">
      <!-- 开始时间 -->
      <picker mode="date" :value="startDate" @change="selectDateFn" data-mode='1'>
        <view class="" style="margin-right:1.28rem">
          <text>开始时间</text>
          <text class="two">{{view_startDate}}</text>
        </view>
      </picker>
      <!-- 截止时间 -->
      <picker mode="date" :value="endDate" @change="selectDateFn" data-mode='2'>
        <view class="">
          <text>截止时间</text>
          <text class="two">{{view_endDate}}</text>
        </view>
      </picker>
    </view>
    <div class="maintenance-car-proportion">
      <div class="title">
        保养总台次
        <span>{{PickingAutoBriefObj.totalAutoCount}}</span> 台，可“马上装”占比
        <span>{{PickingAutoBriefObj.fullPickingPercent}}%</span>
      </div>
    </div>
    <!-- 马上装 -->
    <div class="rightAway-list">
      <div class="header">
        <div class="one">车辆信息</div>
        <div class="one">马上装</div>
      </div>
      <scroll-view class="groupList" scroll-y @scrolltolower="bindscrolltolower">
        <div class="groupItem" v-for="(item, index) in pickingList" :key="index" @click="jumpToPickingDetailed(item)">
          <div class="time" v-if="index == 0 || item.summaryDate != pickingList[index - 1].summaryDate">
            {{item.carInfoDate}}
          </div>
          <div class="carInfoItem">
            <div class="logo">
              <img class="com_img" :src="item.autoDetail.auto_logo" alt="">
            </div>
            <div class="info">
              <div class="title">
                {{item.autoDetail.auto_text}}
              </div>
              <div class="vin">
                {{item.autoDetail.vin_code}}
              </div>
            </div>
            <div class="rightBox">
              <div class="carType">
                <div class="text" v-if="item.fullPickingStatus == 3">
                  精准补货
                </div>
                <img class="imgs" @click.stop="handleClick_ChangeStatus(item, index)" v-if="item.fullPickingStatus == 1" src="../assets/images/button_likeRed.png" alt="">
                <img class="imgs" @click.stop="handleClick_ChangeStatus(item, index)" v-if="item.fullPickingStatus == 2" src="../assets/images/button_likeBlue.png" alt="">
              </div>
              <div class="arrow_right" v-if="item.fullPickingStatus == 3">
              </div>
              <div class="arrow_right" v-else>
                <img class="arrow_right_img" src="../assets/images/arrow_rightGrey.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="noDataView" v-if="isNotMoreData">没有更多数据</div>
      </scroll-view>
    </div>
    <i-modal v-if="showModal" i-class="custom-modal" :title="rightAway_alignConfirmTitle" :visible="isShowRightAwayConfirm" @ok="changeRightAway_success_fn" @cancel="changeRightAway_cancel_fn">
    </i-modal>
  </div>

</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      rightAway_alignConfirmTitle: "",
      currentDate: new Date().getTime(),
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        } else if (type === "month") {
          return `${value}月`;
        }
        return value;
      },
      judgeTime: "", // 开始时间最大选择当天
      startTime: "", // 开始时间
      endTime: "", // 截止时间
      cloudShopName: "", // 云店名称
      carAutoDetail: {}, // 车型信息
      pickingList: [],
      startDate: "", // 开始时间
      endDate: "", // 结束时间
      PickingAutoBriefObj: {},
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
      },
      openDateDialogType: 0, // 1是开始时间  2是结束时间
      isShowRightAwayConfirm: false,
      showModal: false,
      fullPickingObj: {
        index: 0,
        fullPickingStatus: 0,
        item: {},
        serviceNeedStatus: 0, // 后端需要的状态
      },
      customerTeamId: "",
      startDate: "",
      endDate: "",
      view_startDate: "",
      view_endDate: "",
      isProgressWait: false, // 是否正在请求
      isNotMoreData: false, // 是否me米有更多数据
    };
  },
  computed: {
    pickingRightAwayNoMore() {
      return (
        this.pagination.pageSize * this.pagination.current >=
        this.pagination.total
      );
    },
    ...mapState({
      // 获取个人信息
      myInfo: (state) => {
        return state.user.myInfo;
      },
      groupProfile: (state) => {
        return state.conversation.currentConversation.groupProfile;
      },
    }),
  },
  onLoad({ customerTeamId, startDate, endDate }) {
    this.customerTeamId = customerTeamId || 0;
    // this.startDate = startDate || this.$com_util.getNowDateTime(new Date(), 1);
    // this.endDate = endDate || this.$com_util.getNowDateTime(new Date(), 1);
    this.getViewDateFn(startDate, endDate); // 获取页面上展示的开始时间和截止时间
    this.GetFullPickingAutoBrief();
    this.GetFullPickingAutoDetail();
  },
  onUnload() {
    if (this.$options.data) {
      Object.assign(this.$data, this.$options.data());
    }
  },
  methods: {
    //前往精准补货
    goPrecisionReplenish(item) {
      wx.navigateTo({
        url: `/subpackage_zhipei/pages/precisionReplenish/precisionReplenish?vin=${item.vinCode}&teamid=${this.customerTeamId}`,
      });
    },
    // 获取页面上展示的开始时间和截止时间
    getViewDateFn(startDate, endDate) {
      if (startDate) {
        let now_timeStamp = this.$com_util.dateToTimeStamp(startDate);
        this.view_startDate = this.$com_util.getNowDateTime(now_timeStamp, 2);
      } else {
        let nowDate = this.$com_util.getNowDateTime(new Date(), 1);
        let now_timeStamp = this.$com_util.dateToTimeStamp(nowDate);
        this.view_startDate = this.$com_util.getNowDateTime(now_timeStamp, 2);
      }
      if (endDate) {
        let now_timeStamp = this.$com_util.dateToTimeStamp(endDate);
        this.view_endDate = this.$com_util.getNowDateTime(now_timeStamp, 2);
      } else {
        let nowDate = this.$com_util.getNowDateTime(new Date(), 1);
        let now_timeStamp = this.$com_util.dateToTimeStamp(nowDate);
        this.view_endDate = this.$com_util.getNowDateTime(now_timeStamp, 2);
      }
    },
    // 跳转到车型领料明细
    jumpToPickingDetailed(item) {
      if (item.fullPickingStatus == 3) {
        this.goPrecisionReplenish(item);
        return;
      }
      wx.navigateTo({
        url: `../customerPickingDetailed/main?vin=${item.autoDetail.vin_code}&startDate=${this.startDate}&endDate=${this.endDate}&customerTeamId=${this.customerTeamId}`,
      });
    },
    // 点击改变马上装类型二次弹层确认按钮
    async changeRightAway_success_fn() {
      if (this.fullPickingObj.fullPickingStatus == 1) {
        this.pickingList[this.fullPickingObj.index].fullPickingStatus = 2;
      } else if (this.fullPickingObj.fullPickingStatus == 2) {
        this.pickingList[this.fullPickingObj.index].fullPickingStatus = 1;
      }
      this.showModal = false;
      const res = await this.$app_service.request({
        url: "/api/Replenishment/ModifyFullPickingStatus",
        isShowLoading: true,
        data: {
          replenishmentBillId: this.fullPickingObj.item.replenishmentBillId,
          summaryDate: this.fullPickingObj.item.summaryDate,
          vinCode: this.fullPickingObj.item.vinCode,
          fullPickingStatus: this.fullPickingObj.serviceNeedStatus,
          imUserCode: this.myInfo.userID,
        },
      });
      wx.showToast({
        title: "操作成功",
        icon: "success",
        duration: 2000,
      });
      this.GetFullPickingAutoBrief();
    },
    // 二次弹层取消
    changeRightAway_cancel_fn() {
      this.showModal = false;
    },
    // 点击改变马上装类型
    handleClick_ChangeStatus(item, index) {
      this.fullPickingObj.item = item;
      this.fullPickingObj.index = index;
      this.fullPickingObj.fullPickingStatus = item.fullPickingStatus;
      this.fullPickingObj.serviceNeedStatus =
        item.fullPickingStatus == 1 ? 2 : 1;
      if (item.fullPickingStatus == 1) {
        this.rightAway_alignConfirmTitle = "确认当前车型不是马上装车型？";
      } else {
        this.rightAway_alignConfirmTitle = "确认当前车型是马上装车型？";
      }
      this.isShowRightAwayConfirm = true;
      this.showModal = true;
    },
    comReturnFn() {
      return;
    },
    // 取经销商名称
    async getSimpleShopInfo(cloudShopId) {
      const res = await this.$app_service.request({
        url: "/api/CloudShop/GetSimpleShopInfo",
        data: {
          cloudShopId: cloudShopId,
        },
      });
      this.cloudShopName = res.cloudShopName;
    },
    // 取得马上装详情列表
    async GetFullPickingAutoDetail() {
      const res = await this.$app_service.request({
        url: "/api/Replenishment/GetFullPickingAutoDetail",
        isShowLoading: true,
        data: {
          startDate: this.startDate,
          endDate: this.endDate,
          customerTeamId: this.customerTeamId,
          pageIndex: this.pagination.current,
          pageSize: this.pagination.pageSize,
        },
      });
      this.pickingList = [...this.pickingList, ...res.details];
      this.pagination.total = res.totalCount;
      let cloudShopId = res.cloudShopId;
      this.getSimpleShopInfo(cloudShopId);
      this.pickingList.forEach((element) => {
        this.$set(
          element,
          "carInfoDate",
          this.$com_util.getNewDate(element.summaryDate, 2)
        );
      });
      this.isProgressWait = false;
    },
    // 重置马上装详情列表
    resetGetFullPickingAutoDetail() {
      this.pagination.current = 1;
      this.pickingList = [];
      this.GetFullPickingAutoDetail();
    },
    // 取得指定期间的马上装汇总信息
    async GetFullPickingAutoBrief() {
      const res = await this.$app_service.request({
        url: "/api/Replenishment/GetFullPickingAutoBrief",
        data: {
          startDate: this.startDate,
          endDate: this.endDate,
          customerTeamId: this.customerTeamId,
        },
      });
      this.PickingAutoBriefObj = {
        totalAutoCount: res.totalAutoCount,
        fullPickingPercent: res.fullPickingPercent,
      };
    },
    // 选择日期
    selectDateFn(e) {
      this.openDateDialogType = e.mp.currentTarget.dataset.mode;
      let serviceDate = e.mp.detail.value;
      let viewDate = this.$com_util.getNowDateTime(serviceDate, 2); // 页面展示的时间格式
      if (this.openDateDialogType == 1) {
        this.startDate = serviceDate;
        this.view_startDate = viewDate;
      } else {
        this.endDate = serviceDate;
        this.view_endDate = viewDate;
      }
      this.resetGetFullPickingAutoDetail();
    },
    // 页面滚动到最底部加载数据
    bindscrolltolower() {
      if (this.isProgressWait) {
        return;
      }
      if (this.isNotMoreData) {
        return;
      }
      this.isProgressWait = true;
      if (this.pickingRightAwayNoMore) {
        this.isNotMoreData = true;
        wx.hideLoading();
        wx.showToast({
          title: "没有更多数据！",
          duration: 1000,
          icon: "none",
        });
        this.isProgressWait = false;
        return;
      }
      this.pagination.current += 1;
      this.GetFullPickingAutoDetail();
    },
  },
};
</script>

<style lang='stylus' scoped>
.custom-modal
  width 7.73rem !important
.customerPickingDetailed
  height 100vh
  overflow hidden
  background-color #edf1f6
.customer-title
  height 1.12rem
  min-height 1.12rem
  width 100%
  background #ffc100
  color #333
  display flex
  justify-content center
  align-items center
  font-size 0.42rem
  font-weight bold
.Date-view
  display flex
  align-items center
  justify-content center
  width 100%
  background-color #fff
  padding 0.2rem 0
  .start-date
    margin-right 1.28rem
  .date-view-box
    display flex
    justify-content center
    flex-direction column
    align-items center
    .label
      line-height 0.48rem
      color #8e8e8e
      font-size 0.32rem
    .time
      line-height 0.64rem
      color #181818
      margin-top 0.08rem
      font-size 0.4rem
.maintenance-car-proportion
  border-bottom 1px solid #ffe065
  width 100%
  height 1.04rem
  background-color #ffffdc
  display flex
  justify-content center
  align-items center
  margin-top 0.4rem
  .title
    font-size 0.36rem
    color #282828
    span
      font-size 0.36rem
      font-weight bold
      color #e74c3c
.rightAway-list
  .header
    width 100%
    height 1.04rem
    background-color #ffffff
    font-size 0.32rem
    color #bcbcbc
    padding 0 1.07rem 0 0.41rem
    display flex
    justify-content space-between
    align-items center
    box-sizing border-box
  .groupList
    height calc(100vh - 5.2rem)
    overflow-y scroll
    .noDataView
      width 100%
      height 0.8rem
      display flex
      justify-content center
      align-items center
      font-size 0.36rem
      color #a0b0c5
    .groupItem
      display flex
      flex-direction column
    .time
      width 100%
      height 0.8rem
      background-color #ffffff
      opacity 0.54
      font-size 0.32rem
      color #a0b0c5
      display flex
      justify-content center
      align-items center
      box-sizing border-box
    .carInfoItem
      padding 0 0.4rem
      display flex
      align-items center
      background #fff
      border-top 1px solid #e9e9e9
    .groupItem:first-child
      .carInfoItem
        border-top none
    .logo
      width 1.09rem
      height 1.09rem
      min-width 1.09rem
      min-height 1.09rem
      max-width 1.09rem
      max-height 1.09rem
      .com_img
        width 100%
        height 100%
    .info
      margin-left 0.32rem
      padding 0.32rem 0 0.32rem
      .title
        font-size 0.37rem
        color #181818
      .vin
        font-size 0.32rem
        color #999999
        margin-top 0.21rem
    .rightBox
      margin-left auto
      display flex
      justify-content center
      align-items center
    .carType
      width 1.33rem
      height 100%
      display flex
      justify-content center
      align-items center
      margin-right 0.32rem
      .text
        font-size 0.32rem
        color #1459ec
      .imgs
        width 0.8rem
        height 0.8rem
        background-color #ffffff
    .arrow_right
      margin-left auto
      display flex
      justify-content flex-end
      align-items center
      height 100%
      width 0.185rem
      .arrow_right_img
        width 0.185rem
        height 0.32rem
</style>
